Är det möjligt att växla synligheten för ett element med funktionerna .hide (), .show () eller .toggle ()?
Hur skulle du testa om ett element är synligt eller dolt?
2020-12-07 21:53:34
1
2
Nästa
Eftersom frågan hänvisar till ett enda element kan den här koden vara mer lämplig:
// Kontrollerar CSS-innehåll för visning: [none | block], ignorerar synlighet: [true | false]
$ (element) .is (": synlig");
// Samma fungerar med dolda
$ (element) .is (": dold");
Det är detsamma som twernt förslag, men tillämpas på ett enda element; och den matchar den algoritm som rekommenderas i jQuery FAQ.
Vi använder jQuery's is () för att kontrollera det valda elementet med ett annat element, väljare eller något jQuery-objekt. Den här metoden passerar längs DOM-elementen för att hitta en matchning som uppfyller den godkända parametern. Det kommer att vara sant om det finns en matchning, annars returnerar det falskt.
|
Du kan använda den dolda väljaren:
// Matchar alla dolda element
$ ('element: dold')
Och den synliga väljaren:
// Matchar alla synliga element
$ ('element: synlig')
|
if ($ (element) .css ('display') == 'none' || $ (element) .css ("synlighet") == "dold") {
// 'element' är dolt
}
Ovanstående metod tar inte hänsyn till föräldrars synlighet. För att överväga föräldern också bör du använda .is (": dold") eller .is (": synlig").
Till exempel,
Div2
Ovanstående metod kommer att betrakta div2 synlig medan: synlig inte. Men det ovanstående kan vara användbart i många fall, särskilt när du behöver hitta om det finns några feldelningar som är synliga i den dolda föräldern eftersom i sådana förhållanden: synlig fungerar inte.
|
Inget av dessa svar behandlar vad jag förstår är frågan, det är vad jag letade efter, "Hur hanterar jag objekt som har synlighet: dolda?". Varken: synligt eller: dolt kommer att hantera detta, eftersom de båda letar efter visning enligt dokumentationen. Så vitt jag kunde avgöra finns det ingen väljare för att hantera CSS-synlighet. Så här löste jag det (standard jQuery-väljare, det kan finnas en mer sammanfattad syntax):
$ (". item"). vardera (funktion () {
if ($ (detta) .css ("synlighet") == "dold") {
// hantera icke synligt tillstånd
} annat {
// hantera synligt tillstånd
}
});
|
Från Hur bestämmer jag tillståndet för ett växlat element?
Du kan avgöra om ett element är kollapsat eller inte genom att använda: synliga och: dolda väljare.
var isVisible = $ ('# myDiv'). är (': synlig');
var isHidden = $ ('# myDiv'). är (': dold');
Om du helt enkelt agerar på ett element baserat på dess synlighet kan du bara inkludera: synlig eller: dold i väljaruttrycket. Till exempel:
$ ('# myDiv: synlig'). animera ({vänster: '+ = 200px'}, 'långsam');
|
Ofta när du kontrollerar om något är synligt eller inte, kommer du att gå omedelbart omedelbart och göra något annat med det. jQuery chaining gör det enkelt.
Så om du har en väljare och bara vill utföra en åtgärd om den är synlig eller dold kan du använda filter (": synlig") eller filter (": dold") följt av att kedja den med den åtgärd du vill ta.
Så istället för ett if-uttalande, så här:
om ($ ('# btnUpdate'). är (": synlig"))
{
$ ('# btnUpdate'). animera ({bredd: "växla"}); // Dölj knapp
}
Eller mer effektivt, men till och med fulare:
var-knapp = $ ('# btnUpdate');
om (button.is (": synlig"))
{
button.animate ({width: "toggle"}); // Dölj knapp
}
Du kan göra allt på en rad:
$ ('# btnUpdate'). filter (": synlig"). animera ({bredd: "växla"});
|
Den: synliga väljaren enligt jQuery-dokumentationen:
De har inget CSS-visningsvärde.
De är formelement med typ = "dold".
Deras bredd och höjd är uttryckligen inställda på 0.
Ett förfäderelement är dolt, så elementet visas inte på sidan.
Element med synlighet: dold eller opacitet: 0 anses vara synliga eftersom de fortfarande konsumerar utrymme i layouten.
Detta är användbart i vissa fall och meningslöst i andra, för om du vill kontrollera om elementet är synligt (display! = None), ignorerar föräldrarnas synlighet, kommer du att se att göra .css ("display") == 'none är inte bara snabbare utan kommer också att återställa synlighetskontrollen korrekt.
Om du vill kontrollera synlighet istället för att visa bör du använda: .css ("synlighet") == "dold".
Ta också hänsyn till de ytterligare jQuery-anteckningarna:
Eftersom: synlig är ett jQuery-tillägg och inte en del av CSS-specifikationen, kan frågor som använder: synlig inte dra nytta av prestandaförbättringen som tillhandahålls av den inbyggda DOM querySelectorAll () -metoden. För att uppnå bästa prestanda när du använder: synligt för att välja element, välj först elementen med en ren CSS-väljare och använd sedan .filter (": synlig").
Om du är orolig för prestanda bör du också kolla Nu ser du mig ... visa / dölj prestanda (2010-05-04). Och använd andra metoder för att visa och dölja element.
|
Det här fungerar för mig och jag använder show () och hide () för att göra min div dold / synlig:
if ($ (this) .css ('display') == 'none') {
/ * din kod går hit * /
} annat {
/ * alternativ logik * /
}
|
Hur elementvisibilitet och jQuery fungerar;
Ett element kan döljas med display: ingen,synlighet: dold eller opacitet: 0. Skillnaden mellan dessa metoder:
display: ingen döljer elementet och det tar inget utrymme;
synlighet: dolt döljer elementet, men det tar fortfarande plats i layouten;
opacitet: 0 döljer elementet som "synlighet: dolt", och det tar fortfarande plats i layouten; den enda skillnaden är att opacitet låter en göra ett element delvis transparent;
om ($ ('. target'). är (': dold')) {
$ ('. target'). visa ();
} annat {
$ ('. target'). göm ();
}
om ($ ('. target'). är (': synlig')) {
$ ('. target'). göm ();
} annat {
$ ('. target'). visa ();
}
om ($ ('. målsynlighet'). css ('synlighet') == 'dold') {
$ ('. målsynlighet'). css ({
synlighet: "synlig",
display: ""
});
} annat {
$ ('. målsynlighet'). css ({
synlighet: "dold",
display: ""
});
}
if ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. målsynlighet'). css ({
opacitet: "1",
display: ""
});
} annat {
$ ('. målsynlighet'). css ({
opacitet: "0",
display: ""
});
}
Användbara jQuery-växlingsmetoder:
$ ('. klicka'). klicka (funktion () {
$ ('. target'). växla ();
});
$ ('. klicka'). klicka (funktion () {
$ ('. target'). slideToggle ();
});
$ ('. klicka'). klicka (funktion () {
$ ('. target'). fadeToggle ();
});
|
Du kan också göra detta med vanlig JavaScript:
function isRendered (domObj) {
om ((domObj.nodeType! = 1) || (domObj == document.body)) {
återvänd sant;
}
om (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["synlighet"]! = "dold") {
return isRendered (domObj.parentNode);
} annat om (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("synlighet")! = "dold") {
return isRendered (domObj.parentNode);
}
}
returnera falsk;
}
Anmärkningar:
Fungerar överallt
Fungerar för kapslade element
Fungerar för CSS och inline-stilar
Kräver inte ramverk
|
Jag skulle använda CSS-klass .hide {display: none! Important; }.
För att dölja / visa, ringer jag .addClass ("hide") /. RemoveClass ("hide"). För att kontrollera synlighet använder jag .hasClass ("göm").
Det är ett enkelt och tydligt sätt att kontrollera / dölja / visa element om du inte planerar att använda .toggle () eller .animate () metoder.
|
Demolänk
$ ('# clickme'). klicka (funktion () {
$ ('# bok'). växla ('långsam', funktion () {
// Animering klar.
varning ($ ('# bok'). är (": synlig")); // <--- SANT om Synlig Falsk om Dold
});
});
Klicka här
Källa:
Blogger Plug n Play - jQuery-verktyg och widgets: Hur man ser om Element är dolt eller synligt med jQuery
|
Man kan helt enkelt använda det dolda eller synliga attributet, som:
$ ('element: dold')
$ ('element: synlig')
Eller så kan du förenkla detsamma med är som följer.
$ (element) .is (": synlig")
|
ebdiv ska ställas in på style = "display: none;". Det fungerar både för att visa och dölja:
$ (dokument). klar (funktion () {
$ ("# eb"). klicka på (funktion () {
$ ("# ebdiv"). växla ();
});
});
|
Ett annat svar du bör ta hänsyn till är om du gömmer ett element, ska du använda jQuery, men istället för att gömma det tar du bort hela elementet, men du kopierar dess HTML-innehåll och taggen till en jQuery-variabel och sedan allt du behöver göra är att testa om det finns en sådan tagg på skärmen, med den normala if (! $ ('# thetagname'). längd).
|
När man testar ett element mot: dold selektor i jQuery bör man överväga att ett absolut placerat element kan kännas igen som dolt även om deras underordnade element är synliga.
Detta verkar i första hand något kontraintuitivt - men när man tittar närmare på jQuery-dokumentationen får du relevant information:
Element kan betraktas som dolda av flera anledningar: [...] Deras bredd och höjd är uttryckligen inställda på 0. [...]
Så det är vettigt med avseende på boxmodellen och den beräknade stilen för elementet. Även om bredd och höjd inte är uttryckligen inställd på 0 kan de ställas in implicit.
Ta en titt på följande exempel:
console.log ($ ('. foo'). är (': dold')); // Sann
console.log ($ ('. bar'). är (': dold')); // falskt
.foo {
position: absolut;
vänster: 10px;
överst: 10px;
bakgrund: # ff0000;
}
.bar {
position: absolut;
vänster: 10px;
överst: 10px;
bredd: 20px;
höjd: 20px;
bakgrund: # 0000ff;
}
Uppdatering för jQuery 3.x:
Med jQuery 3 kommer det beskrivna beteendet att förändras! Element kommer att betraktas som synliga om de har några layoutrutor, inklusive de med nollbredd och / eller höjd.
JSFiddle med jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Samma JavaScript-kod kommer då att ha denna utdata:
console.log ($ ('. foo'). är (': dold')); // falskt
console.log ($ ('. bar'). är (': dold'));// falskt
|
Detta kan fungera:
förvänta dig ($ ("# message_div"). css ("display")). toBe ("none");
|
Exempel:
$ (dokument). klar (funktion () {
if ($ ("# checkme: hidden"). längd) {
console.log ('Hidden');
}
});
Kategori: Fisk
Produkt: Laxatlantisk
Specie: Salmo salar
Form: biffar
|
För att kontrollera om den inte är synlig använder jag!:
om (! $ ('# book'). är (': synlig')) {
varning ('# bok är inte synlig')
}
Eller så är det också sam som sparar jQuery-väljaren i en variabel för att få bättre prestanda när du behöver den flera gånger:
var $ book = $ ('# book')
om (! $ book.is (': synlig')) {
varning ('# bok är inte synlig')
}
|
Använd klassbyte, inte stilredigering. . .
Att använda klasser som är avsedda för att "dölja" element är enkelt och också en av de mest effektiva metoderna. Att växla en klass "dold" med en visningsstil på "ingen" kommer att fungera snabbare än att redigera den stilen direkt. Jag förklarade en del av detta ganska grundligt i Stack Overflow-frågan Att vända två element som är synliga / dolda i samma div.
JavaScript bästa metoder och optimering
Här är en verkligt upplysande video av ett Google Tech Talk av Googles frontingenjör Nicholas Zakas:
Snabba upp ditt Javascript (YouTube)
|
Exempel på att använda den synliga kontrollen för adblockerare är aktiverad:
$ (dokument). klar (funktion () {
om (! $ ("# ablockercheck"). är (": synlig"))
$ ("# ablockermsg"). text ("Inaktivera adblockeraren."). visa ();
});
"ablockercheck" är ett ID som adblockeraren blockerar. Så att kontrollera om det är synligt kan du upptäcka om adblockeraren är på.
|
Trots allt passar inget av exemplen mig, så jag skrev mitt eget.
Tester (inget stöd för Internet Explorer-filter: alfa):
a) Kontrollera om dokumentet inte är dolt
b) Kontrollera om ett element har nollbredd / höjd / opacitet eller display: ingen / synlighet: dold i inbyggda stilar
c) Kontrollera om mittpunkten (även för att den är snabbare än att testa varje pixel / hörn) av elementet inte döljs av andra element (och alla förfäder, exempel: överflöd: dold / bläddra / ett element över ett annat) eller skärmkanter
d) Kontrollera om ett element har nollbredd / höjd / opacitet eller display: ingen / synlighet: dold i beräknade stilar (bland alla förfäder)
Testat på
Android 4.4 (Native browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 dokumentlägen + Internet Explorer 8 på en virtuell maskin) och Safari (Windows / Mac / iOS).
var is_visible = (funktion () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHöjd - 1: 0,
relativ = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
funktion inuti (barn, förälder) {
medan (barn) {
om (barn === förälder) returnerar sant;
child = child.parentNode;
}
returnera falsk;
};
returfunktion (elem) {
om (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'dold' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) returnera falsk;
var rect = elem.getBoundingClientRect ();
om (relativ) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) returnera false;
} annat om (
! inuti (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) returnera falsk;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
medan (el) {
if (el === dokument) {break;} annars om (! el.parentNode) returnerar false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
om (comp && (comp.visibility == 'dold' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) returnera false;
el = el.parentNode;
}
}
återvänd sant;
}
}) ();
Hur man använder:
is_visible (elem) // boolean
|
Du måste kontrollera både ... Visa såväl som synlighet:
if ($ (this) .css ("display") == "none" || $ (this) .css ("synlighet") == "dold") {
// Elementet är inte synligt
} annat {
// Elementet är synligt
}
Om vi söker efter $ (detta). Är (": synligt"), kontrollerar jQuery automatiskt för båda sakerna.
|
Du kanske kan göra något så här
$ (dokument). klar (funktion () {
var synlig =$ ('# tElement'). är (': synlig');
om (synligt) {
varning ("synlig");
// Kod
}
annan
{
varning ("dold");
}
});
Förnamn
|
Kontrollera bara synligheten genom att söka efter ett booleskt värde, som:
if (this.hidden === false) {
// Din kod
}
Jag använde den här koden för varje funktion. Annars kan du använda är (': synlig') för att kontrollera synligheten för ett element.
|
Eftersom element med synlighet: dold eller opacitet: 0 anses vara synliga eftersom de fortfarande konsumerar utrymme i layouten (som beskrivs för jQuery: synlig väljare) - kan vi kontrollera om elementet verkligen syns på detta sätt:
function isElementReallyHidden (el) {
returnera $ (el) .is (": dold") || $ (el) .css ("synlighet") == "dold" || $ (el) .css ('opacitet') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). varje (funktion () {
om (isElementReallyHidden (detta)) {
booElementReallyShowed = false;
}
});
|
Men tänk om elementets CSS är som följande?
.element{
position: absolut; vänster: -9999;
}
Så det här svaret på Stack Overflow-frågan Hur man kontrollerar om ett element är utanför skärmen bör också övervägas.
|
En funktion kan skapas för att söka efter synlighets- / visningsattribut för att mäta om elementet visas i användargränssnittet eller inte.
function checkUIElementVisible (element) {
returnera ((element.css ('display')! == 'none') && (element.css ('synlighet')! == 'dold'));
}
Working Fiddle
|
Här är också ett terna villkorligt uttryck för att kontrollera elementets tillstånd och sedan växla det:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' långsam ');});
|
om ($ ('# postcode_div'). är (': synlig')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} annat {
$ ('# spanPost'). text ($ ('# postnummer_text'). val ());
}
|
1
2
Nästa
Mycket aktiv fråga. Tjäna 10 rykte för att svara på den här frågan. Kravet på rykte hjälper till att skydda denna fråga från skräppost och icke-svar-aktivitet.
Inte svaret du letar efter? Bläddra bland andra frågor taggade javascript jquery dom synlighet eller ställ din egen fråga.
Källa:
Blogger Plug n Play - jQuery-verktyg och widgets: Hur man ser om Element är dolt eller synligt med jQuery
|
Man kan helt enkelt använda det dolda eller synliga attributet, som:
$ ('element: dold')
$ ('element: synlig')
Eller så kan du förenkla detsamma med är som följer.
$ (element) .is (": synlig")
|
ebdiv ska ställas in på style = "display: none;". Det fungerar både för att visa och dölja:
$ (dokument). klar (funktion () {
$ ("# eb"). klicka på (funktion () {
$ ("# ebdiv"). växla ();
});
});
|
Ett annat svar du bör ta hänsyn till är om du gömmer ett element, ska du använda jQuery, men istället för att gömma det tar du bort hela elementet, men du kopierar dess HTML-innehåll och taggen till en jQuery-variabel och sedan allt du behöver göra är att testa om det finns en sådan tagg på skärmen, med den normala if (! $ ('# thetagname'). längd).
|
När man testar ett element mot: dold selektor i jQuery bör man överväga att ett absolut placerat element kan kännas igen som dolt även om deras underordnade element är synliga.
Detta verkar i första hand något kontraintuitivt - men när man tittar närmare på jQuery-dokumentationen får du relevant information:
Element kan betraktas som dolda av flera anledningar: [...] Deras bredd och höjd är uttryckligen inställda på 0. [...]
Så det är vettigt med avseende på boxmodellen och den beräknade stilen för elementet. Även om bredd och höjd inte är uttryckligen inställd på 0 kan de ställas in implicit.
Ta en titt på följande exempel:
console.log ($ ('. foo'). är (': dold')); // Sann
console.log ($ ('. bar'). är (': dold')); // falskt
.foo {
position: absolut;
vänster: 10px;
överst: 10px;
bakgrund: # ff0000;
}
.bar {
position: absolut;
vänster: 10px;
överst: 10px;
bredd: 20px;
höjd: 20px;
bakgrund: # 0000ff;
}
Uppdatering för jQuery 3.x:
Med jQuery 3 kommer det beskrivna beteendet att förändras! Element kommer att betraktas som synliga om de har några layoutrutor, inklusive de med nollbredd och / eller höjd.
JSFiddle med jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Samma JavaScript-kod kommer då att ha denna utdata:
console.log ($ ('. foo'). är (': dold')); // falskt
console.log ($ ('. bar'). är (': dold'));// falskt
|
Detta kan fungera:
förvänta dig ($ ("# message_div"). css ("display")). toBe ("none");
|
Exempel:
$ (dokument). klar (funktion () {
if ($ ("# checkme: hidden"). längd) {
console.log ('Hidden');
}
});
|
För att kontrollera om den inte är synlig använder jag!:
om (! $ ('# book'). är (': synlig')) {
varning ('# bok är inte synlig')
}
Eller så är det också sam som sparar jQuery-väljaren i en variabel för att få bättre prestanda när du behöver den flera gånger:
var $ book = $ ('# book')
om (! $ book.is (': synlig')) {
varning ('# bok är inte synlig')
}
|
Använd klassbyte, inte stilredigering. . .
Att använda klasser som är avsedda för att "dölja" element är enkelt och också en av de mest effektiva metoderna. Att växla en klass "dold" med en visningsstil på "ingen" kommer att fungera snabbare än att redigera den stilen direkt. Jag förklarade en del av detta ganska grundligt i Stack Overflow-frågan Att vända två element som är synliga / dolda i samma div.
JavaScript bästa metoder och optimering
Här är en verkligt upplysande video av ett Google Tech Talk av Googles frontingenjör Nicholas Zakas:
Snabba upp ditt Javascript (YouTube)
|
Exempel på att använda den synliga kontrollen för adblockerare är aktiverad:
$ (dokument). klar (funktion () {
om (! $ ("# ablockercheck"). är (": synlig"))
$ ("# ablockermsg"). text ("Inaktivera adblockeraren."). visa ();
});
"ablockercheck" är ett ID som adblockeraren blockerar. Så att kontrollera om det är synligt kan du upptäcka om adblockeraren är på.
|
Trots allt passar inget av exemplen mig, så jag skrev mitt eget.
Tester (inget stöd för Internet Explorer-filter: alfa):
a) Kontrollera om dokumentet inte är dolt
b) Kontrollera om ett element har nollbredd / höjd / opacitet eller display: ingen / synlighet: dold i inbyggda stilar
c) Kontrollera om mittpunkten (även för att den är snabbare än att testa varje pixel / hörn) av elementet inte döljs av andra element (och alla förfäder, exempel: överflöd: dold / bläddra / ett element över ett annat) eller skärmkanter
d) Kontrollera om ett element har nollbredd / höjd / opacitet eller display: ingen / synlighet: dold i beräknade stilar (bland alla förfäder)
Testat på
Android 4.4 (Native browser / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 dokumentlägen + Internet Explorer 8 på en virtuell maskin) och Safari (Windows / Mac / iOS).
var is_visible = (funktion () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHöjd - 1: 0,
relativ = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
funktion inuti (barn, förälder) {
medan (barn) {
om (barn === förälder) returnerar sant;
child = child.parentNode;
}
returnera falsk;
};
returfunktion (elem) {
om (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'dold' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) returnera falsk;
var rect = elem.getBoundingClientRect ();
om (relativ) {
if (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) returnera false;
} annat om (
! inuti (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) returnera falsk;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
medan (el) {
if (el === dokument) {break;} annars om (! el.parentNode) returnerar false;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
om (comp && (comp.visibility == 'dold' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) returnera false;
el = el.parentNode;
}
}
återvänd sant;
}
}) ();
Hur man använder:
is_visible (elem) // boolean
|
Du måste kontrollera både ... Visa såväl som synlighet:
if ($ (this) .css ("display") == "none" || $ (this) .css ("synlighet") == "dold") {
// Elementet är inte synligt
} annat {
// Elementet är synligt
}
Om vi söker efter $ (detta). Är (": synligt"), kontrollerar jQuery automatiskt för båda sakerna.
|
Du kanske kan göra något så här
$ (dokument). klar (funktion () {
var synlig =$ ('# tElement'). är (': synlig');
om (synligt) {
varning ("synlig");
// Kod
}
annan
{
varning ("dold");
}
});
Förnamn
|
Kontrollera bara synligheten genom att söka efter ett booleskt värde, som:
if (this.hidden === false) {
// Din kod
}
Jag använde den här koden för varje funktion. Annars kan du använda är (': synlig') för att kontrollera synligheten för ett element.
|
Eftersom element med synlighet: dold eller opacitet: 0 anses vara synliga eftersom de fortfarande konsumerar utrymme i layouten (som beskrivs för jQuery: synlig väljare) - kan vi kontrollera om elementet verkligen syns på detta sätt:
function isElementReallyHidden (el) {
returnera $ (el) .is (": dold") || $ (el) .css ("synlighet") == "dold" || $ (el) .css ('opacitet') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). varje (funktion () {
om (isElementReallyHidden (detta)) {
booElementReallyShowed = false;
}
});
|
Men tänk om elementets CSS är som följande?
.element{
position: absolut; vänster: -9999;
}
Så det här svaret på Stack Overflow-frågan Hur man kontrollerar om ett element är utanför skärmen bör också övervägas.
|
En funktion kan skapas för att söka efter synlighets- / visningsattribut för att mäta om elementet visas i användargränssnittet eller inte.
function checkUIElementVisible (element) {
returnera ((element.css ('display')! == 'none') && (element.css ('synlighet')! == 'dold'));
}
Working Fiddle
|
Här är också ett terna villkorligt uttryck för att kontrollera elementets tillstånd och sedan växla det:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' långsam ');});
|
om ($ ('# postcode_div'). är (': synlig')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). text ('\ u00a0');
} annat {
$ ('# spanPost'). text ($ ('# postnummer_text'). val ());
}
|
1
2
Nästa
Mycket aktiv fråga. Tjäna 10 rykte för att svara på den här frågan. Kravet på rykte hjälper till att skydda denna fråga från skräppost och icke-svar-aktivitet.
Inte svaret du letar efter? Bläddra bland andra frågor taggade javascript jquery dom synlighet eller ställ din egen fråga.